/**
 * 
 * @authors cherish yii2 (cherish@cherish.pw)
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...

// 获取标签对象
const title = document.querySelector('#title');
const todoList = document.querySelector('#todolist');
const doneList = document.querySelector('#donelist');
const todoCount = document.querySelector('#todocount');
const doneCount = document.querySelector('#donecount');
// 定义变量
let todocount = 0;
let donecount = 0;
let arr = [];

title.addEventListener('change', function () {
    let value = title.value;

    let obj = {
        name: value, status: false,
    }
    arr.push(obj);
    title.value = '';
    setPage();

})

// 根据数组动态渲染页面
function setPage() {
    reset();
    let todoStr = '';
    let doneStr = '';
    for (let i = 0; i <= arr.length - 1; i++) {
        let obj = arr[i];
        if (obj.status === false) {
            todocount++;
            todoStr += `
                <li>
                    <input type="checkbox" name="${obj.name}" class="value">
                    <p onclick="edit(${i})">${obj.name}</p>
                    <a class="clear" name="${obj.name}" href="javascript:remove()">-</a>
                </li>
            `;
        } else {
            donecount++;
            doneStr += `
                <li>
                    <input type="checkbox" name="${obj.name}" class="value">
                    <p onclick="edit(${i})">${obj.name}</p>
                    <a class="clear" name="${obj.name}" href="javascript:remove()">-</a>
                </li>
            `;
        }
    }

    todoList.innerHTML = todoStr;
    todoCount.innerHTML = todocount;
    doneList.innerHTML = doneStr;
    doneCount.innerHTML = donecount;

    // 删除事件
    let A = document.querySelectorAll('.clear');
    for (let i = 0; i <= A.length - 1; i++) {

        A[i].addEventListener('click', function(){
            let name = this.getAttribute('name');
            arr = arr.filter(e => {
                return e.name !== name
            });
            setPage();
        })
    }

    // 改变完成度
    let change = document.querySelectorAll('.value');

    for (let i = 0; i <= change.length - 1; i++) {
        change[i].addEventListener('change', function(){
            let name = this.getAttribute('name');
            let obj = arr.find(function(e){
                return e.name === name
            });
            obj.status = this.checked;

            setPage();
        })
    }
}

// 重置
function reset() {
    todocount = 0;
    donecount = 0;
}